<style>
  .error-row .ivu-card-head{
    background: rgb(255, 153, 0) none repeat scroll 0% 0%;
  }
  .error-row .ivu-card-head p {
    color: #fff;
  }
  .datalist{
    margin-top: 20px;
  }
</style>
<template>
    <div>
        <Row type="flex" justify="center" align="middle" :gutter="20">
            <Col span="20">
              <Card :bordered="false" v-if="!isupload">
                    <p slot="title">模板下载</p>
                    <a :href="useHttp+'/Uploads/excelFile/template/批量新增用户.xlsx'" download="w3logo">模板下载</a>
                </Card>
            </Col>
            <Col span="20">
                <Card :bordered="false" v-if="!isupload">
                    <p slot="title">提示</p>
                    <ul>
                        <li>支持格式：xlsx,xls,csv</li>
                        <li>最大1G</li>
                    </ul>
                </Card>
               <Upload
                    v-if="!isupload"
                    type="drag"
                    :action="useHttp+'/index.php/index/fileoper/uploadExcelfile'"
                    :format="['xlsx','xls','csv']"
                    :multiple="multiple"
                    :on-success="uploadSuccess"
                    :on-error="uploadError"
                    :max-size="1024"
                    @clearFiles="clearlist"
                    >
                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>点击或将文件拖拽到这里上传</p>
                    </div>
                </Upload>
                <Alert type="success" v-if="isupload&&resultUpload">{{resultmsg}}&nbsp;&nbsp;&nbsp;{{uploadfile}}</Alert>
                <Alert type="error" v-if="isupload&&!resultUpload">{{resultmsg}}</Alert>
            </Col>
            <Col span="20" v-if="isupload">
                <Col span="10" >
                    <Button type="success" long @click="batchInsert">批量增加</Button>
                </Col>
                <Col span="10" offset="4">
                    <Button type="error"  long  @click="clearlist">取消 重传</Button>
                </Col>
            </Col>
            <br>
            <Col span="20" v-if="isaddend">
              <div v-for="item in list" :key="item.index" class="datalist">
                <Card  :class="[item.inserted?'success-row':'error-row']">
                    <p slot="title" >{{item.index}}&nbsp;&nbsp;{{item.msg}}</p>
                    <Row>
                       <Col span="1">
                        用户名
                       </Col>
                       <Col span="2">
                        {{item.wname}}
                       </Col>
                       <Col span="1">
                        性别
                       </Col>
                       <Col span="2">
                        {{item.gender?item.gender:'无'}}
                       </Col>
                       <Col span="1">
                        民族
                       </Col>
                       <Col span="2">
                        {{item.nation?item.nation:'无'}}
                       </Col>
                       <Col span="2" >
                        政治面貌
                       </Col>
                       <Col span="2">
                        {{item.politic?item.politic:'无'}}
                       </Col>
                        <Col span="2">
                        户籍类型
                       </Col>
                       <Col span="2">
                        {{item.census?item.census:'无'}}
                       </Col>
                       <Col span="2">
                        就业状态
                       </Col>
                       <Col span="2">
                        {{item.jobstatus?item.jobstatus:'无'}}
                       </Col>
                    </Row>
                    <Row>
                      <Col span="2">
                        身份证
                       </Col>
                       <Col span="4">
                        {{item.sfzid}}
                       </Col>
                      <Col span="2">
                        手机号
                       </Col>
                       <Col span="4">
                        {{item.telno}}
                       </Col>
                    </Row>
                    <Row>
                       <Col span="3">
                        是否农民工
                       </Col>
                       <Col span="1">
                        {{item.ismigrant>=0?$t('ismigrant_'+item.ismigrant):'无'}}
                       </Col>
                       <Col span="4">
                        是否具有稳定劳动关系的农民工
                       </Col>
                       <Col span="1">
                        {{item.isstable>=0?$t('isstable_'+item.isstable):'无'}}
                       </Col>
                       <Col span="2">
                        八大群体
                       </Col>
                       <Col span="2">
                        {{item.iseightgroup?item.iseightgroup:'无'}}
                       </Col>
                       <Col span="2">
                        单位名称
                       </Col>
                       <Col span="3">
                        {{item.enterprisename?item.enterprisename:'无'}}
                       </Col>
                    </Row>
                </Card>
              </div>

            </Col>
        </Row>
    </div>
</template>
<script>
import { batchinsertuser } from '@/api/user'

export default {
  name: 'workerbatchinsert',
  data () {
    return {
      dev_http: 'http://labourunionserver.dev.com',
      pro_http: 'https://app.tjzhxx.cn:1443/',
      multiple: false,
      isupload: false,
      resultUpload: false,
      resultmsg: '',
      uploadfile: '',
      isaddend: false,
      list: []
    }
  },
  computed: {
    useHttp () {
      const env = process.env.NODE_ENV
      if (env === 'development') {
        return this.dev_http
      } else {
        return this.pro_http
      }
    }
  },
  methods: {
    uploadSuccess (response, file, fileList) {
      const code = response.code
      const msg = response.msg
      const data = response.data
      this.resultmsg = msg
      this.isupload = true // 初始化
      if (code === 200) {
        this.resultUpload = true
        this.uploadfile = data.filename
      } else {
        this.resultUpload = false
      }
    },
    uploadError (error, file, fileList) {
      this.isupload = true // 初始化
      this.resultUpload = false
      const msg = error.msg
      this.resultmsg = msg
    },
    batchInsert () {
      const fileName = this.uploadfile
      batchinsertuser({ fileName }).then(res => {
        const data = res.data
        if (data.code === 200) {
          this.isaddend = true
          this.list = data.data
        }
      })
    },
    clearlist () {
      this.isupload = false
      this.resultUpload = false
      this.resultmsg = ''
      this.uploadfile = ''
      this.isaddend = false
      this.list = []
      this.isaddend = false
      this.list = []
      this.$refs.upload.clearFiels()
    }
  },
  mounted () {
    console.log(this.useHttp)
  }
}
</script>
